import React, {Component} from 'react'
import UserInfomationVM from 'cvm/mine/userInformation'
import './index.less'
import { observer } from 'mobx-react/custom'
import Dialog from 'uxcore-dialog'
import Button from 'uxcore-button'
let Select = require('uxcore-select2')
let Option = Select.Option

const UserBox = observer(({ vm }) => {
  if (!vm.data) return <div />
  return (
    <div className='user-box'>
      <div className='header-img-box flex-wrap'>
        <div className='flex-1 header-text'>头像</div>
        <div className='flex-1 header-image'>
          <img
            src={vm.data.Headimgurl}
            alt='' />
          <img src={require('images/right.png')} alt='' />
          <input style={{fontSize: 16}} onChange={vm.handleImageChange} type='file' id='multiple' className='multiple' />
        </div>
      </div>
      <div className='nickname flex-wrap' onClick={vm.handleShowNameDialog}>
        <Dialog ref='modal'
          wrapClassName='vertical-center-dailog'
          visible={vm.visibleName}
          title='修改昵称'
          footer={[
            <Button key='back' onClick={vm.handleCancelNameDialog} size='small' type='secondary'>取 消</Button>,
            <Button key='submit' onClick={vm.handleOkName} size='small'>确 定</Button>
          ]}>
          <input type='text' value={vm.nameValue} onChange={vm.handleChangeName} placeholder='请输入要修改的昵称' />
        </Dialog>
        <div className='flex-1'>昵称</div>
        <div className='flex-1'>
          <span>{vm.data.Nickname}</span>
          <img src={require('images/right.png')} alt='' />
        </div>
      </div>
      <div className='sex-box flex-wrap'>
        <div className='flex-1'>性别</div>
        <div className='flex-1' />
        <Select className='kuma-select2-inline'
          value={vm.data.Sex}
          showSearch={false}
          onSelect={vm.handleSexChange}
          dropdownClassName='kuma-select2-inline-dropdown'>
          <Option value='1'>男 </Option>
          <Option value='2'>女 </Option>
        </Select>
      </div>
    </div>
  )
})

const RegisterBox = observer(({ vm }) => {
  if (!vm.data) return <div />
  return (
    <div className='register-box'>
      <div className='register-time flex-wrap'>
        <div className=' flex-1'>注册时间</div>
        <div className=' flex-1'>{vm.data.CreateTime}</div>
      </div>
      <div className='visit-time flex-wrap'>
        <div className=' flex-1'>最近访问时间</div>
        <div className=' flex-1'>{vm.data.UpdateTime}</div>
      </div>
      {vm.userInfo.blank === 1 &&
        <div className='visit-time flex-wrap'>
          <div className=' flex-1'>小黑屋结束时间</div>
          <div className=' flex-1'>{vm.userInfo.blankTime}</div>
        </div>}
    </div>
  )
})

@observer
export default class UserInformation extends Component {
  vm = new UserInfomationVM(this.props)
  constructor (props) {
    super(props)
    window.document.title = '个人信息'
  }

  render () {
    return (
      <div>
        <UserBox vm={this.vm} />
        <RegisterBox vm={this.vm} />
      </div>
    )
  }
}
